<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">已购套餐</block>
		</cu-custom>
		<view class="list">
			<view class="item" v-for="(item,index) in thisData" :key="index">
				<view class="">
					<view class="">
						<text>总价值</text>
						<text class="text-price text-colorP">{{item.p_price}}</text>
					</view>
					<view class="">
						<view>
							{{item.p_name}}
						</view>
						<view class="">
							<text>{{item.p_start_time}}至{{item.p_end_time}}</text>
							<text @click="open(index)">立即使用</text>
						</view>
					</view>
				</view>
				<view class="position" :style="!item.close?'height:0':'height: auto'">
					<view class="combo-item" v-for="(jtem,index) in item.p_product" :key="index">
						<view class="radius"></view>
						<view class="shops" :data-id="jtem.b_id" :data-industryId="jtem.b_industry==6" @click="navUrl">
							<text class="text-cut">{{jtem.b_name}}</text>
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/right1.png" mode=""></image>
						</view>
						<view class="items" v-for="(goods,g) in jtem.product" :key="g">
							<view class="">
								<text class="text-cut">{{goods.product_name}}</text>
								<text>({{goods.number}}份)</text>
							</view>
							<view class="" @click="show(goods.v_code)">
								去核销
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
		<no-content :showType="'data'" v-if='noContentShow' :tips="'你还没有购买套餐产品~'"></no-content>
		<tui-modal :show="modalShow" @cancel="hide" :custom="true" shape="circle">
			<view class="tui-modal-custom">
				<image :src="nowImage" mode=""></image>
				<view class="nowImage" @click="hide">
					关闭
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import noContent from './component/noContent.vue'
	import tuiModal from '@/components/thorUI/modal.vue'
	export default {
		components: {
			noContent,
			tuiModal
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				thisData: [],
				page: 1,
				lastPage: '',
				noMore: false,
				noContentShow: false,
				modalShow: false,
				nowImage: ''
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.noMore = true
				return
			}
			this.getData()
		},
		methods: {
			navUrl(e) {
				var isIndusty = e.currentTarget.dataset.industryid
				var id = e.currentTarget.dataset.id
				if (isIndusty) {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
			show(image) {
				this.nowImage = image
				this.modalShow = true
			},
			hide() {
				this.modalShow = false
			},
			open(index) {
				var thisData = this.thisData
				thisData.forEach((item, i) => {
					if (i == index) {
						item.close = true
					} else {
						item.close = false
					}
				})
			},
			getData() {
				var that = this
				this.$request({
					url: '/ComboOrder/get_order_by_uid',
					data: {
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.totalNum == 0) {
								that.noContentShow = true
								return
							} 
							var list = res.data.data.data
							list.forEach(item => {
								item['close'] = false
							})
							that.thisData = that.thisData.concat(list)
							that.page++
							that.lastPage = res.data.data.pageCount
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
	}
</script>

<style scoped>
	.list {
		width: 100%;
		padding: 20rpx 24rpx !important;
	}

	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.item>view:nth-child(1) {
		width: 100%;
		display: flex;
		height: 182rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx 0;
		position: relative;
	}

	.item>view:nth-child(1)>view:nth-child(1) {
		width: 200rpx;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item>view:nth-child(1)>view:nth-child(1)>text:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #f34930;
	}

	.item>view:nth-child(1)>view:nth-child(1)>text:nth-child(2) {
		font-size: 48rpx;
		font-weight: bold;
	}

	.item>view:nth-child(1)>view:nth-child(2) {
		flex: 1;
		display: flex;
		height: 140rpx;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 20rpx;
	}

	.item>view:nth-child(1)>view:nth-child(2)>view:nth-child(1) {
		max-width: 450rpx;
		font-size: 28rpx;
		color: #333333;

		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item>view:nth-child(1)>view:nth-child(2)>view:nth-child(2) {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item>view:nth-child(1)>view:nth-child(2)>view:nth-child(2)>text:nth-child(1) {
		font-size: 24rpx;
		color: #999999;
	}

	.item>view:nth-child(1)>view:nth-child(2)>view:nth-child(2)>text:nth-child(2) {
		display: inline-block;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		line-height: 48rpx;
		width: 142rpx;
		height: 48rpx;
		background-image: linear-gradient(0deg,
			#f34930 0%,
			#ff907f 100%);
		border-radius: 24rpx;
	}

	.item .position {
		width: 640rpx;
		height: auto;
		margin: 0 auto;
		background: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		transition: all .3s;
		overflow: hidden;
	}

	.item .position .combo-item:nth-child(1) {
		margin-top: 20rpx
	}

	.combo-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-left: 28rpx;
		box-sizing: border-box;
	}

	.combo-item .radius {
		width: 8px;
		height: 8px;
		background-color: #333333;
		position: absolute;
		top: 10rpx;
		left: 0;
		border-radius: 100%;
	}

	.combo-item .shops {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 20rpx;
	}

	.combo-item .shops text {
		max-width: 500rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.combo-item .shops image {
		width: 30rpx;
		height: 30rpx;
	}

	.combo-item .items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.combo-item .items>view:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.combo-item .items>view:nth-child(1)>text:nth-child(1) {
		max-width: 400rpx;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.combo-item .items>view:nth-child(1)>text:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.combo-item .items>view:nth-child(2) {
		font-size: 24rpx;
		color: #f34930;
		text-align: center;
		align-items: center;
		width: 112rpx;
		height: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border: solid 1rpx #f34930;
	}
	
	.tui-modal-custom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.tui-modal-custom image{
		width: 250rpx;
		height: 250rpx;
	}
	
	.tui-modal-custom view{
		width: 200rpx;
		height: 50rpx;
		border: solid 1rpx #f34930;
		font-size: 24rpx;
		color: #f34930;
		text-align: center;
		line-height: 50rpx;
		margin-top: 30rpx;
		border-radius: 8rpx;
	}
</style>
<style>
	page {
		background: #f5f5f5;
	}
</style>
